<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
</head>
<body>
<div class="x-body">
    <form class="layui-form">
        <!--userInfo的uid-->
        <input type="hidden" name="uId" id="uId" th:value="${userInfo.uId}">
        <!--userDetail的udid-->
        <input type="hidden" name="udId" th:value="${userInfo.userDetail.udId}">
        <!--文件上传的html代码-->

        <input type="hidden" name="url" class="image">

        <div class="layui-form-item">
            <label class="layui-form-label ">照片:</label>
            <div class="layui-upload">

                <button type="button" class="layui-btn" id="test1">上传头像</button>

                <div class="layui-upload-list" style="margin-left: 100px">
                    <img class="layui-upload-img" th:src="${userInfo.userDetail.url}" id="demo1" width="200" height="100" >
                    <p id="demoText"></p>
                </div>
            </div>
        </div>


        <div class="layui-form-item">
            <label for="userName" class="layui-form-label">
                <span class="x-red">*</span>登录名
            </label>
            <div class="layui-input-inline">
                <input type="text" id="userName" name="userName" required="" lay-verify="required"
                       autocomplete="off" class="layui-input" th:value="${userInfo.userName}">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>将会成为您唯一的登入名
            </div>
        </div>
        <div class="layui-form-item">
            <label for="tel" class="layui-form-label">
                <span class="x-red">*</span>手机
            </label>
            <div class="layui-input-inline">
                <input type="text" id="tel" name="phone" th:value="${userInfo.userDetail.phone}" required="" lay-verify="phone"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>将会成为您唯一的登入名
            </div>
        </div>
        <div class="layui-form-item">
            <label for="email" class="layui-form-label">
                <span class="x-red">*</span>邮箱
            </label>
            <div class="layui-input-inline">
                <input type="text" id="email" name="email" th:value="${userInfo.userDetail.email}" required="" lay-verify="email"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="x-red">*</span>角色</label>
            <div class="layui-input-block">
                <!-- 角色复选框隐藏值-->
                <input type="hidden" name="roleId" id="roleId">
                <ul id="roleCheckBox" style="float: left">
                </ul>
            </div>
        </div>

        <div class="layui-form-item">
            <label  class="layui-form-label">
            </label>
            <button  class="layui-btn" lay-filter="add" lay-submit="">
                保存
            </button>
        </div>
    </form>
</div>
</body>
</html>
<script>
    layui.use('upload', function(){
        var $ = layui.jquery
            ,upload = layui.upload;
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: '/day02/upload/'//服务器路径
            ,accept:'images'//上传的文件类型
            ,size:50000//文件大小
            //上传之前运行的函数
            ,before: function(obj){
                obj.preview(function(index, file, result){
                    //显示上传图片
                    $('#demo1').attr('src', result);
                });
            }
            //访问服务端后执行的函数
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功
                //var demoText = $('#demoText');
                $('#demoText').html('<span style="color: #4cae4c;">上传成功</span>');

                var fileupload = $(".image");
                //把图片在项目中的路径存入到 属性 class=image的input框中
                fileupload.attr("value",res.data.src);
                console.log(fileupload.attr("value"));
            }
            //访问服务端失败或者上传失败要执行的函数
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });
    });

    //获取选中角色是复选框的值
    function getRid() {
        var rId="";
        $('input[type=checkbox]:checked').each(function() {
            rId+=$(this).val()+",";
        });
        console.log(rId)
        $("#roleId").val(rId);
    }

    layui.use(['form','layer'], function(){
        $ = layui.jquery;
        var form = layui.form
            ,layer = layui.layer;

        //新增按钮
        form.on('submit(add)', function(data){

            console.log(data);

            $.ajax({
                url:"/day02/submitUpdate",
                async: false,
                type:"POST",
                dataType: "json",
                data:data.field,
                success: function(data){
                    layer.alert(data.info);

                    if(data.info=="修改成功"){
                        // 获得frame索引
                        var index = parent.layer.getFrameIndex(window.name);
                        //关闭当前frame
                        parent.layer.close(index);
                        //刷新
                        parent.window.location.replace("/day02/list")
                    }

                }
            })


            return false;
        });

    });

    //选中当前修改用户的角色复选框信息
    $(function () {
        //获取要用户的id
        var uId= $("#uId").val();
        $.ajax({
            url:"/day02/loadMyRole",
            type:"get",
            async: false,
            dataType: "json",
            data:{"uId":uId},
            success: function(data) {
                console.log(data)
                //拼接复选框的html变量
                var html = "";
                //复选框选中的角色的变量
                var rId="";
                //通过js拼接 复选框
                for (var i = 0; i < data.roleList.length; i++) {
                    var k=0;
                    for (var j = 0; j < data.myRoleList.length; j++) {
                        //判断当前用户的角色有哪些，拼接 选中当前复选框的角色
                        if (data.roleList[i].rName == data.myRoleList[j].rName) {
                            html += " <li style=\"float: left\" onclick=\"getRid()\">\ " +
                                "<input  lay-filter=\"role\" " +
                                "title=\"" + data.roleList[i].rName + "\" " +
                                "value=\"" + data.roleList[i].rId + "\"  " +
                                "type=\"checkbox\"  " +
                                "name=\"roleName\" " +
                                "lay-skin=\"primary\"" +
                                "checked='' ></li>"
                            k++;
                            //把选中角色的id传给选中的角色的变量
                            rId+=data.roleList[i].rId+",";
                        }
                    }
                    //当前用户没有的角色，复选框就不选中
                    if(k==0){
                        html += " <li style=\"float: left\"onclick=\"getRid()\">\ " +
                            "<input  lay-filter=\"role\" " +
                            "title=\"" + data.roleList[i].rName + "\" " +
                            "value=\"" + data.roleList[i].rId + "\"  " +
                            "type=\"checkbox\"  " +
                            "name=\"roleName\" " +
                            "lay-skin=\"primary\"" +
                            " ></li>"
                    }

                }
                //把拼接好的复选框 复制到id=roleCheckBox的ul标签中
                $("#roleCheckBox").html(html);
                //把选中的角色赋值给id=roleId的变量
                $("#roleId").val(rId);
            }
        })
    });

    //获取选中角色是复选框的值
    function getRid() {
        var rId="";
        $('input[type=checkbox]:checked').each(function() {
            rId+=$(this).val()+",";
        });
        console.log(rId)
        $("#roleId").val(rId);
    }

</script>